<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
	<style>
		.layui-tree-set-active > .layui-tree-entry .layui-tree-main {
			background: #f2f2f2;
		}
	</style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space15">
	<div class="layui-col-md3">
		<div class="layui-card">
			<div class="layui-card-body">

				<div id="tree"></div>
			</div>
		</div>
	</div>
	<div class="layui-col-md9">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="" id="searchForm" >
					<div class="layui-row">
						<div class="layui-col-xs4 layui-col-sm6 layui-col-md4">
							<div class="layui-form-item">
								<div class="layui-input-group">
									<div class="layui-input-prefix">栏目名称</div>
									<input type="text" name="name" placeholder="请输入栏目名称" class="layui-input">
								</div>
							</div>
						</div>
						<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
							<div class="layui-form-item">
								<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="data-table-query-filter">
									<i class="layui-icon layui-icon-search"></i>查询
								</button>
								<button type="reset" class="pear-btn pear-btn-md">
									<i class="layui-icon layui-icon-refresh"></i>重置
								</button>
							</div>
						</div>
					</div>
				</form>
				<table id="data-table" lay-filter="data-table-filter"></table>
			</div>
		</div>
	</div>
</div>

<script type="text/html" id="toolbarLeftTpl">
	<button class="pear-btn pear-btn-md pear-btn-primary" lay-event="add">新增</button>
</script>
<script type="text/html" id="operationTpl">
	<a href="javascript:void(0);" lay-event="edit" class="operation-link primary-link">修改</a>
	<a href="javascript:void(0);" lay-event="delete" class="operation-link delete-link">删除</a>
</script>

<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
	layui.use(['common','table', 'form', 'jquery','layer', 'admin', 'dict', 'tree'], function() {
		let common = layui.common;
		let table = layui.table;
		let form = layui.form;
		let $ = layui.jquery;
		let layer = layui.layer;
		let dict = layui.dict;
		let tree = layui.tree;

		let onId=0;
		let parentName = '全部';
		// 保存之前选中的节点元素
		var previouslySelectedNodeElem = null;

		let cols = [[
			{ type: 'checkbox', hide: true },
			{ field: 'id', title: 'ID', width: 200, hide: true },
			{ field: 'name', title: '栏目名称', width: 200, align: 'center' },
			{ field: 'parentName', title: '父级栏目名称', width: 200, align: 'center' },
			{ field: 'sort', title: '排序' , width: 100, align: 'center'},
			{ field: 'status', title: '前台状态', width: 120, align: 'center', event: 'disabled', templet: function(d) {
					return dict.labelStatus('common_status', d.status, true);
				} },
			{ field: 'operation', title: '操作', align: 'center', fixed: 'right',toolbar: '#operationTpl'}
		]]

		table.render({
			elem: '#data-table',
			url: '/crm/subject/page',
			where:{parentId:onId},
			request: {
				pageName: 'pageNo', // 页码的参数名称，默认：page
				limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
			},
			parseData: function(res) {
				let total = !$.vtl.isBlank(res.data)? res.data.total : 0;
				let list = !$.vtl.isBlank(res.data)? res.data.list : [];
				return {
					"code": 0,
					"msg": 'SUCCESS',
					"count": total,
					"data": list
				};
			},
			done: function(res, curr, count){
				if(res.code == 401){
					top.window.location.href = 'login.html' ;
				}
			},
			page: true,
			cols: cols,
			skin: 'line',
			toolbar: '#toolbarLeftTpl',
			defaultToolbar: [{ title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter', 'print', 'exports']
		});

		table.on('toolbar(data-table-filter)', function(obj) {
			if (obj.event === 'add') {
				window.edit();
			}else if (obj.event === 'refresh') {
				window.refresh(true);
			}
		});

		table.on('tool(data-table-filter)', function(obj) {
			let row = obj.data;
			switch (obj.event) {
				case 'detail':
					window.detail(row.id);
					break;
				case 'edit':
					window.edit(row.id);
					break;
				case 'delete':
					window.delete(obj);
					break;
				default:
					break;
			}
		});

		form.on('submit(data-table-query-filter)', function(data) {
			data.field.parentId = onId;
			window.refresh(data.field);
			return false;
		});


		window.refresh = function(field = {}, deep = false) {
			$.vtl.tableReloadData('data-table', field, deep);
		}

		window.edit = function(id) {
			let url = 'edit.html'+ '?parentId='+onId +'&parentName='+encodeURIComponent(parentName)+ ($.vtl.isBlank(id) ? '' : ('&id=' + id));
			$.vtl.openLayer(url, { title: $.vtl.isBlank(id) ? '新增' :'编辑', area: [ '60%', '90%' ] });
		}

		window.delete = function(obj) {
			layer.confirm('确定删除？', { icon: 3, title: '提示' }, function(index) {
				layer.close(index);
				$.delete('/crm/subject/delete?id=' + obj.data.id, function(result) {
					if (result.code == 0) {
						window.refresh(true);
						initTree();
					}
				});
			});
		}

		window.setDisabledValueForType = function(obj) {
			layer.confirm('确定切换【启用/停用】状态？', { icon: 3, title: '提示' }, function(index) {
				layer.close(index);
				obj.data.status=obj.data.status===0?1:0
				$.put('/crm/subject/update', JSON.stringify(obj.data), function(result) {
					if (result.code == 0) {
						window.refresh(true);
						initTree();
					}
				});
			});
			window.refresh(true);
		}

		window.initTree = function () {
			$.get('/crm/subject/tree', function(result){
				tree.render({
					elem: '#tree',
					data: result,
					showCheckbox: false,  // 是否显示复选框
					showLine: true,  // 是否开启连接线
					onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
					//id: 'deptTree',
					isJump: false, // 是否允许点击节点时弹出新窗口跳转
					click: function(node) {
						// 清除之前选中的节点颜色
						if (previouslySelectedNodeElem) {
							$(previouslySelectedNodeElem).find('.layui-tree-txt').css('color', '');
						}

						// 设置当前选中节点的颜色
						var currentTextElem = $(node.elem).find('.layui-tree-txt').first();
						currentTextElem.css('color', '#01aaed');
						//$(node.elem).find('.layui-tree-txt').css('color', 'red');

						// 保存当前选中的节点元素
						previouslySelectedNodeElem = node.elem;

						let data = node.data;  //获取当前点击的节点数据
						onId = data.id;
						parentName = data.title;
						let param = common.serializeJson($("#searchForm"));
						param.parentId = data.id;
						window.refresh(param);

					}
				});


			});

		}

		window.initTree();

	})
</script>
</body>
</html>
